<template>
	<view id="domxee-content" :class="globalData.defaultThemes">
		<view id="header_wrapper" class="color-white" :style="styles.header_wrapper">
			<nii-navbar :globalData="globalData" :scroll="scroll" back fixed minPadding back_alias="account">
				<view slot="title">
					<view id="title" class="fw-bolder">{{renders.main_title}}</view>
				</view>
			</nii-navbar>
		</view>
	
		<view id="content_wrapper">
			<view class="" style="padding: 50rpx 50rpx 0 50rpx;">
				<view class="d-flex j-sa" style="background: linear-gradient( 46deg, #FEE88D 0%, #F3CD4A 100%); border-radius: 40rpx 40rpx 0 0;">
					<view class="d-flex flex-column j-center a-baseline" style="">
						<view class="avatar_box overflow-hidden rounded-circle bg-white">
							<u--image :src="renders.infos.avatar" width="100rpx" height="100rpx" radius="100rpx" mode="aspectFit" :bgColor="globalData.colors.current.section" class="avatar">
							  <template v-slot:loading>
								 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
							  </template>
							  <template v-slot:error>
								 <image src="@/static/media/images/loading.png" mode="aspectFit"></image>
							  </template>
							</u--image>
						</view>
						<view class="nickname fw-bolder mt-20">{{renders.infos.nickname}}</view>
					</view>
					<view class="domxee_icon iconfont icon-vip color-white" style="font-size: 200rpx;"></view>
				</view>
			</view>
			
			<view class="bg-white p-40" style="border-radius: 20rpx 20rpx 0 0;">
				<view class="d-flex j-sb p-40 a-center" style="background: linear-gradient( 46deg, #FCD87F 0%, #FFE9BC 100%); border-radius: 30rpx;">
					<view class="d-flex a-baseline">
						<view class="" style="color: #75777B; font-size: 24rpx;">
							¥
						</view>
						<view class="font-58">
							1000
						</view>
					</view>
					<view class="">
						永久会员
					</view>
				</view>
				
				<view class="text-center mt-30">
					<view class="">
						选择收货门店
					</view>
					<view @click="shows.pickerShow = true" class="b-r32 color-white py-20" style="background-color: #75777B;">
						{{merchantTitle}}
					</view>
				</view>
			</view>
			
			<view class="p-40">
				<view @click="submit" class="color-white p-20 text-center" style="background-color: #3587FE; border-radius: 20rpx;">
					立即激活
				</view>
			</view>
		</view>
		
		<u-picker :show="shows.pickerShow" :columns="renders.merchant_lists" keyName="title" 
		:defaultIndex="[0]" :closeOnClickOverlay="true" @close="closePicker" @confirm="confirmPicker" 
		@cancel="closePicker" @change="changePicker">
		</u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalData: {windowWidth: 0, statusBarHeight: 0, navHeight: 0, navigationBarHeight: 0, wechatCapsule: {width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0}, defaultThemes: [], colors: {}, configs: {} },
				scroll: 0,
				current_page: {route: '', params: {}, url: ''},
				ready: false,
				options: {

				},
				styles: {
					header_wrapper: ''
				},
				shows: {
					pickerShow: false,
				},
				renders: {
					main_title: "",
					background: '',
					infos: {avatar: '', nickname: ''},
					merchant_lists: [
						[
							{}
						]
					],
					formData: {
						merchant_id: ''
					},
				},
				data: {
					currentIndex: 0,
					sections: {
						
					},
				},
			}
		},
		onReady() {						//页面渲染完毕后操作（动态获取/调整元素宽高位置等需在ready后获取最为准确）
			//设置对象
			let that = this;

		},
		onShow() {						//页面显示后操作（关闭、后台运行等操作后重新打开访问触发、可在实时性较高操作页面进行全页刷新）
			//设置对象
			let that = this;
			//判断是否准备就绪
			if (that.ready) {
				//初始数据
				that.initInformation();
			}
		},
		computed: {
			merchantTitle(){
				let arr = this.renders.merchant_lists;
				return arr[0][this.data.currentIndex]['title'];
			},
		},
		onLoad(options) {				//页面加载时操作（options可获取当前页面传递参数，如：options.id）
			//设置对象
			let that = this;
			//设置当前页面数据
			that.current_page = that.nii_common.pages.getCurrentUrl();
			//设置默认数据
			that.globalData = that.nii_common.pages.initGlobalData(getApp().globalData);
			//设置参数
			that.options = options;
			//初始数据
			that.initInformation();
		},
		methods: {
			//默认跳转操作
			navigateAction: function(alias, requestParams = {}, action = 'navigate', authenticate = false, animationType = 'slide-in-right') {this.nii_common.navigate.action(alias, requestParams, action, authenticate, animationType); },
			//拨打电话
			// callPhone: function(mobile) {uni.makePhoneCall({phoneNumber: mobile});},
			// //复制数据
			// clipboardData: function (text) {const that = this;that.nii_common.clipboardData(text);},
			initInformation: function() {
				//设置对象
				let that = this;
				//loading
				that.nii_common.toastLoading('加载中');		
				//发起请求
				that.nii_common.request.build('user/open_member_information', that.options, 'GET', function (res) {
					//设置数据
					that.renders = res.data;
					console.log(that.renders.formData);
				}, function (res) {
					//提示错误
					that.nii_common.toastAlert(res.msg);
				}, function(res) {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				}, true);	
			},
			confirmPicker(event){
				console.log(event);
				let that = this;
				that.data.currentIndex = (event.indexs)[0];
				that.renders.formData.merchant_id = (event.value)[0]['id'];
				that.shows.pickerShow = false;
				
				console.log(that.data.formData);
				// console.log(that.data.currentIndex);
			},
			closePicker(event){
				this.shows.pickerShow = false;
			},
			changePicker(event){
				// console.log(event);
				// let that = this;
				// that.data.currentIndex = event.index;
			},
			submit: function() {
				//获取对象
				const that = this;
				//loading
				that.nii_common.toastLoading('转账处理中...');
				//发起请求
				that.nii_common.request.build('user/open_member_action', that.renders.formData, 'POST', function (res) {
					//提示成功
					that.nii_common.toastAlert(res.msg, 'success');
					//跳转钱包页面
					setTimeout(function () {that.navigateAction('account.index', {}, 'launch');}, 1500);
				}, function (res) {
					//提示错误
					that.nii_common.toastAlert(res.msg);
				}, function(res) {
					//隐藏loading
					that.nii_common.toastLoadingHide();
				}, true);	
			}
			
		},
		onPullDownRefresh(res) {
			//设置对象
			let that = this;
			
			//TODO：页面下拉刷新时的事件
			
			
			//停止刷新
			uni.stopPullDownRefresh();	
		},
		onReachBottom() {
			//设置对象
			let that = this;
			//追加列表
			// that.getLists();
			
		},
		onPageScroll: function(e) {
			//设置页面滑动高度
			this.scroll = e.scrollTop

			//TODO：需判断滑动高度后处理的事件

		}
	}

</script>

<style lang="scss">
	.page_color {
		color: #FFFFFF;
	}
	#domxee-content{
		position: relative;
		z-index: 0;
		background-color: #3D3155;
	}
	// #header_wrapper {
	// 	padding-bottom: 80rpx;
	// 	position: relative;
	// 	z-index: -1;
	// 	overflow: hidden;
	// 	#title {
	// 		font-size: 40rpx;
	// 		line-height: 48rpx;
	// 		letter-spacing: 1rpx;
	// 		margin-left: 10rpx;
	// 		font-weight: 600;
	// 	}
	// 	#infos {
	// 		margin-top: 30rpx;
	// 		.infos {
	// 			.infos_box {
	// 				.info {
	// 					.avatar_box {
	// 						width: 100rpx;
	// 						height: 100rpx;
	// 						border-radius: 100rpx;
	// 						margin-right: 20rpx;
	// 					}
	// 					.account {
	// 						.names {
	// 							.nickname {
	// 								font-size: 32rpx;
	// 								line-height: 44rpx;
	// 								margin-right: 20rpx;
	// 							}
	// 							.level {
	// 								background: #ECD6B1;
	// 								border-radius: 20rpx;
	// 								font-size: 24rpx;
	// 								line-height: 40rpx;
	// 								padding: 0 20rpx;
	// 								color: #333333;
	// 								.domxee_icon {
	// 									color: #333333;
	// 									margin-right: 8rpx;
	// 									font-size: 24rpx;
	// 									line-height: 40rpx;
	// 								}
	// 							}
	// 						}
	// 						.rows {
	// 							margin-top: 10rpx;
	// 							width: 450rpx;
	// 							.row {
	// 								margin: 10rpx 30rpx 0 0;
	// 								font-size: 24rpx;
	// 								line-height: 34rpx;
	// 							}
	// 						}
	// 					}
	// 				}
	// 				.qr_box {
	// 					width: 80rpx;
	// 					.domxee_icon {
	// 						font-size: 60rpx;
	// 						line-height: 60rpx;
	// 						margin: 0 auto;
	// 					}
	// 					.text {
	// 						margin-top: 10rpx;
	// 						font-size: 24rpx;
	// 						line-height: 34rpx;
	// 					}
	// 				}
	// 			}
	// 			.idents {
	// 				margin-left: 120rpx;
	// 				margin-top: 10rpx;
	// 				.ident {
	// 					padding: 0 20rpx;
	// 					height: 44rpx;
	// 					background: rgba(0,0,0,0.3);
	// 					border-radius: 20rpx;
	// 					line-height: 44rpx;
	// 					font-size: 24rpx;
	// 					color: #F5DEB5;
	// 					margin-right: 20rpx;
	// 					margin-top: 20rpx;
	// 				}
	// 			}
	// 		}
	// 	}
		
	// }
	// #header_wrapper::after {
	// 	content: '';
	// 	width: 120%;
	// 	height: 120%;
	// 	position: absolute;
	// 	left: 50%;
	// 	transform: translateX(-50%);
		
	// 	top: 0;
	// 	z-index: -1;
	// 	border-radius: 0 0 100% 100%;
	// 	background: linear-gradient(135deg, #389944 0%, #389944 100%);
	// }
	// #content_wrapper {
	// 	padding-bottom: 300rpx;
	// 	margin-top: -30rpx;
	// 	#invite {
	// 		margin-bottom: 30rpx;
	// 		.invite {
	// 			.invite_box {
	// 				padding: 30rpx 40rpx;
	// 				border-radius: 20rpx;
	// 				.title {
	// 					font-size: 24rpx;
	// 					line-height: 34rpx;
	// 				}
	// 				.content {
	// 					margin-top: 10rpx;
	// 					.item {
	// 						margin: 10rpx 30rpx 0 0;
	// 						font-size: 28rpx;
	// 						line-height: 40rpx;
	// 					}
	// 				}
	// 			}
	// 		}
	// 	}
	// 	#counts {
	// 		.counts {
	// 			.counts_box {
	// 				padding: 30rpx;
	// 				border-radius: 20rpx;
	// 				.count {
	// 					width: 300rpx;
	// 					.value {
	// 						font-size: 40rpx;
	// 						line-height: 56rpx;
	// 					}
	// 					.name {
	// 						margin-top: 20rpx;
	// 						font-size: 24rpx;
	// 						line-height: 34rpx;
	// 					}
	// 				}
	// 			}
	// 		}
	// 	}
	// 	#search {
	// 		margin-top: 20rpx;
	// 		.search {
	// 			.search_box {
	// 				padding: 20rpx;
	// 				border-radius: 20rpx;
	// 				.domxee_icon {
	// 					font-size: 30rpx;
	// 					line-height: 34rpx;
	// 					margin-right: 20rpx;
	// 					font-weight: 500;
	// 				}
	// 				.input {
	// 					font-size: 24rpx;
	// 					line-height: 34rpx;
	// 					margin-right: 20rpx;
	// 				}
	// 				.button {
	// 					padding: 8rpx 20rpx;
	// 					font-size: 24rpx;
	// 					line-height: 34rpx;
	// 					border-radius: 20rpx;
	// 				}
	// 			}
	// 		}
	// 	}
	// 	#ad {
	// 		margin-top: 30rpx;
	// 	}
	// 	#lists {
	// 		margin-top: 30rpx;
	// 		.lists {
	// 			.lists_box {
	// 				.contents {
	// 					border-radius: 20rpx;
	// 					margin-top: 50rpx;
	// 					.lists_loading {
	// 						margin-top: 30rpx;
	// 					}
	// 					.lists_finished {
	// 						margin-top: 30rpx;
	// 						font-size: 26rpx;
	// 						line-height: 34rpx;
	// 					}
	// 					.lists_empty {
	// 						margin-top: 30rpx;
	// 						.domxee_icon {			
	// 							font-size: 300rpx;
	// 							line-height: 300rpx;
	// 						}
	// 						.text {
	// 							margin-top: 10rpx;
	// 							font-size: 26rpx;
	// 							line-height: 34rpx;
	// 						}
	// 					}
	// 					.content {
	// 						margin-top: 30rpx;
	// 						padding: 30rpx 20rpx;
	// 						border-radius: 20rpx;
	// 						.names {
	// 							.left {
	// 								.avatar_box {
	// 									width: 40rpx;
	// 									height: 40rpx;
	// 									border-radius: 40rpx;
	// 									margin-right: 10rpx;
	// 								}
	// 								.nickname {
	// 									font-size: 26rpx;
	// 									line-height: 36rpx;
	// 								}
	// 							}
	// 							.level {
	// 								background: #ECD6B1;
	// 								border-radius: 20rpx;
	// 								font-size: 24rpx;
	// 								line-height: 40rpx;
	// 								padding: 0 20rpx;
	// 								color: #333333;
	// 								.domxee_icon {
	// 									color: #333333;
	// 									margin-right: 8rpx;
	// 									font-size: 24rpx;
	// 									line-height: 40rpx;
	// 								}
	// 							}
	// 						}
	// 						.line {
	// 							margin: 30rpx 0 0 0;
	// 							width: 100%;
	// 							height: 2rpx;
	// 							opacity: .5;
	// 						}
	// 						.values {
	// 							.value {
	// 								width: 300rpx;
	// 								font-size: 26rpx;
	// 								line-height: 36rpx;
	// 								margin: 30rpx 0 0 0;
	// 							}
	// 							.value:nth-of-type(n+2) {
	// 								margin-right: 0;
	// 							}
 // 							}
	// 						.tags {
	// 							.tag {
	// 								margin: 30rpx 30rpx 0 0;
	// 								width: max-content;
	// 								border-radius: 20rpx;
	// 								padding: 4rpx 20rpx;
	// 								font-size: 24rpx;
	// 								line-height: 34rpx;
	// 							}
	// 						}
	// 					}
	// 					.content:first-child {
	// 						margin-top: 0;
	// 					}
	// 				}
					
	// 			}
	// 		}
	// 	}
		
		
	// }
</style>